# Component: Shop Cart

Transactional basket summary with currency formatting and checkout logic

Ecommerce Block

### BEM Anatomy

| Type      | Class Name           | Description                                                                                            |
| --------- | -------------------- | ------------------------------------------------------------------------------------------------------ |
| ==Block== | `.as-shop-cart`      | The master cart container. Orchestrates product rows and total calculations.                           |
| Element   | `__total`            | Flex container for the final subtotal. Uses `justify-content: space-between`.                          |
| Element   | `__label`            | The descriptive text for the total (e.g., "Total inclusive of VAT").                                   |
| Element   | `__price`            | The numerical display of the total; often styled with larger, bolder typography.                       |
| Element   | `__actions`          | Bottom action area. Aligns the checkout button to the `end` of the container.                          |
| Element   | `__state`            | Wrapper for non-data states. Modifiers: `--loading` and `--empty`.                                     |
| Modifier  | `__state--loading`   | Active during price updates or cart synchronization; typically applies a reduced opacity or a spinner. |
| Modifier  | `__state--empty`     | Displayed when no items are present; often includes a "Back to Shop" link.                             |
| Element   | `__button`           | Base class for buttons within the cart scope.                                                          |
| Modifier  | `__button--checkout` | Primary call-to-action styling for the checkout transition.                                            |

### State Management

The cart evaluates three primary states: **Populated** (iterating through rows), **Loading** (fetching basket data), and **Empty**. Additionally, it features a fail-safe check for the Checkout Page URL to prevent user frustration during misconfiguration.

##### Generated HTML (Total & Actions)

```html
<div class="as-shop-cart">
    <!-- List of ShopCartRowComponents -->
    
    <div class="as-shop-cart__total">
        <div class="as-shop-cart__label">Subtotal</div>
        <div class="as-shop-cart__price">$120.00</div>
    </div>

    <div class="as-shop-cart__actions">
        <a href="/checkout" class="as-shop-cart__button--checkout btn btn-primary">
            Proceed to Checkout
        </a>
    </div>
</div>
```

##### SCSS

```scss
.as-shop-cart {
  &__total {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1rem;

    &__label, &__price {
      font-weight: bold;
      align-content: center; // Vertical centering
    }
  }

  &__actions {
    display: flex;
    justify-content: flex-end;
  }

  &__state {
    &--empty {
       // Styles for empty cart alert
    }
  }
}
```
